<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12_jQuery-元素的过滤器</title>
    <!-- 
 
  --></head>
  <body>
    <ul id="list" class="panel">
      <li class="li-1">li-1</li>
      <li class="li-2">li-2</li>
      <li class="li-3">li-3</li>
      <li class="li-4">li-4</li>
      <li class="li-5">li-5</li>
    </ul>

    <script src="../libs/jquery-3.6.0.js"></script>
    <script>
      // 1.监听文档完全解析完成
      $(function () {
        // 1.基本过滤器
        // :first 获取第一个元素
        // :last 获取最后一个元素
        // :eq(index) 获取指定索引的元素

        // 2.内容过滤器
        // :contains(text) 获取包含指定文本内容的元素
        // :has(selector) 获取包含指定子元素的元素

        // 3.属性过滤器
        // [attribute] 获取包含指定属性的元素
        // [attribute=value] 获取属性等于指定值的元素
        // [attribute!=value] 获取属性不等于指定值的元素
        // [attribute^=value] 获取属性值以指定值开头的元素
        // [attribute$=value] 获取属性值以指定值结尾的元素
        // [attribute*=value] 获取属性值包含指定值的元素
        // [attribute][attribute2] 获取同时包含多个属性的元素

        // 4.子元素过滤器
        // :nth-child(index/even/odd/equation) 获取每个父元素下的第N个子元素
        // :first-child 获取每个父元素的第一个子元素
        // :last-child 获取每个父元素的最后一个子元素
        // :only-child 获取每个父元素下只有一个子元素的元素

        // 5.表单相关过滤器
        // :input 获取所有input,textarea,select,button元素
        // :text 获取所有单行文本框
        // :password 获取所有密码框
        // :radio 获取所有单选按钮
        // :checkbox 获取所有复选框
        // :submit 获取所有提交按钮
        // :image 获取所有图像域
        // :reset 获取所有重置按钮
        // :button 获取所有按钮
        // :file 获取所有文件域

        // 案例:
        console.log($("ul li:first"));
        console.log($("ul li:last"));
        console.log($("ul li:eq(2)"));
        console.log($("ul li:has(.price)"));

        console.log($("ul li").filter(".li-4"));
        console.log($("ul li").filter(".li-4 .li-3"));
        var $el = $("ul li").filter(".li-2, .li-3, .li-4").eq(1);

        console.log($el);
      });
    </script>
  </body>
</html>
